<template>
    <div>
        <el-card class="box-card">
            <div slot="header">
                  <!-- 表单搜索操作栏 -->
        <el-form :inline="true" :model="search" class="demo-form-inline" size="mini">

            <el-form-item>
                <el-button type="success" @click="add">添加</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="danger" @click="dels()">批量删除</el-button>
            </el-form-item>

            <el-form-item>
                <el-input v-model="search.name" placeholder="店铺名称"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="getTableData">查询</el-button>
            </el-form-item>
            </el-form>                   
            </div>
              <!-- 表格数据 -->
        <el-table ref="multipleTable" :data="tableData" v-loading="loading" tooltip-effect="dark" style="width: 100%"
            @selection-change="handleSelectionChange">

            <el-table-column type="expand">
            <template #default="scope">
                <el-row :gutter="20" class="property-container">
                <el-col 
                    :xs="24" 
                    :sm="12" 
                    :md="8" 
                    v-for="item in scope.row.GoodPropertyKey" 
                    :key="item.GPKID"
                >
                    <el-card shadow="never" class="property-card">
                    <!-- 属性名称 -->
                    <div class="property-title">
                        <el-icon><el-icon-menu/></el-icon>
                        <strong>{{ item.Name }}</strong>
                    </div>
                    
                    <!-- 属性值列表 -->
                    <ul class="property-list">
                        <li 
                        v-for="pp in item.GoodPropertyValue" 
                        :key="pp.GPVID"
                        :class="['value-item', { 'default-value': pp.Is_Default }]"
                        >
                        <span class="value-text">{{ pp.Value }}</span>
                        <el-tag 
                            v-if="pp.Is_Default" 
                            type="success" 
                            size="mini" 
                            effect="plain"
                            class="default-tag"
                        >
                            默认
                        </el-tag>
                        </li>
                    </ul>
                    </el-card>
                </el-col>
                </el-row>
            </template>
            </el-table-column>

            <el-table-column type="selection" width="55">
            </el-table-column>

            <el-table-column prop="store_id" label="编号" width="55">
            </el-table-column>

            <el-table-column prop="store_name" label="店铺名称" width="90">
                <template #default="{ row }">
                    <div v-html="highlight(row.store_name)"></div>
                </template>
            </el-table-column>
            <el-table-column prop="store_address" label="地址" width="150">
            </el-table-column>

            <el-table-column prop="store_number" label="电话" width="150" >
            </el-table-column>
            <el-table-column prop="store_text" label="描述" show-overflow-tooltip>
                <template #default="{ row }">
                    <div v-html="highlight(row.store_text)"></div>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="220">
                <template #default="{ row }">
                    <!-- 删除气泡提示 -->
                    <el-popconfirm confirm-button-text='好的' cancel-button-text='不用了' icon="el-icon-info"
                        icon-color="red" :title="'确定删除【' + row.store_name + '】的信息吗？'" @confirm="del(row.store_id)"
                        @cancel="$message('已取消删除')">
                        <template #reference>
                            <el-button type="danger" size="mini">删除</el-button>
                        </template>
                    </el-popconfirm>
                    &nbsp;
                    <el-button type="warning" size="mini" @click="edit(row)">修改</el-button>
                </template>
            </el-table-column>
        </el-table>
        <br> 
        <!-- 分页 -->
        <el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange"
            :hide-on-single-page="autoHide" :page-sizes="[5, 10, 20, , 50, 100]" :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="totalNum" background>
        </el-pagination>


        <!-- 添加的弹窗 -->
        <el-dialog title="添加店铺信息" append-to-body width="800px" top="5vh" :visible.sync="createDialogFormVisible">
            <create v-model="createDialogFormVisible" @refresh="getTableData"></create>
        </el-dialog>


        <!-- 修改的弹窗 -->
        <el-dialog title="修改店铺信息" append-to-body width="800px" top="5vh" :visible.sync="editDialogFormVisible">
            <edit v-model="editDialogFormVisible" :editData="editData" @refresh="getTableData"></edit>
        </el-dialog>
        
        </el-card>
      

     
    </div>
</template>

<script>

import create from '../Stores/CreateStoresView.vue'
import edit from '../Stores/EditStoreView.vue'
export default {
    data () {
        return {
            loading: false,
            pageIndex: 1,  //当前的 页码
            pageSize: 5,   //每页条数
            totalNum: 0,   //总数量
            autoHide: false,  //当只有一页数据时是否隐藏分页
            search: {
                name: ''
            },
            tableData: [],    //数据
            multipleSelection: [],  //选中的数据
            editData: {},
            //控制添加弹窗
            createDialogFormVisible: false,
            editDialogFormVisible: false,
        }
    },methods: {
        getTableData(){
            this.axios({
                method:"get",
                url:"stores",
                params:{page:this.pageIndex,limit:this.pageSize,name:this.search.name}
            })   .then(res => {
                    console.log(res)
                    this.tableData = res.data.data;
                    this.totalNum = res.data.count;
                    setTimeout(() => {
                        this.loading = false;
                    }, 200);
                })
                .catch(err => {
                    console.error("请求失败:", err);
                    alert("请求失败!!!");
                });
        }//复选框选中
        , handleSelectionChange(val) {
            this.multipleSelection = val;
        },//删除
        del(id){
            this.axios({
                method:"DELETE",
                url:"stores",
                params:{id}
            })  .then((res) => {
                    if (res.data.code > 0) {
                        //axios  完成
                        this.$message({
                            message: res.data.msg,
                            type: "success",
                            showClose: true,
                            duration: 3000,
                        });

                        //刷新
                        this.getTableData();
                    } else {
                        this.$message({
                            message: res.data.msg,
                            type: "error",
                            showClose: true,
                            duration: 3000,
                        });
                    }
                })


        },//批量删除
        dels(){
            if(this.multipleSelection.length>0){
                let Sname="";
                let Sid=[];

                this.multipleSelection.forEach((v,i)=>{
                    Sname+=v.store_name+",";
                    Sid[i]=v.store_id;
                })

                 //二次确认
            this.$confirm("确定要删除商家"+Sname+"吗?","提示",{
                confirmButtonText:"确定",
                cancelButtonText:"取消",
                type:'warning'
            }).then(()=>{
                this.axios({
                    method:"DELETE",
                    url:"stores",
                    data:Sid
                }).then(res => {
                        if (res) {
                            this.$notify({
                                title: '删除成功!',
                                message: '这是一条成功的提示消息',
                                type: 'success'
                            });
                           //刷新
                        this.getTableData();
                        } else {
                            this.$notify.error({
                                title: '提示!',
                                message: '删除失败!'
                            });
                        }
                    }).catch(err => {

                        console.log("错误信息:", err)
                    })
            })
            }
        }
        ,//添加
        add(){
          this.createDialogFormVisible=true;
        },//修改
        edit(row){
            this.editData=row;
            this.editDialogFormVisible=true;
           // sessionStorage.setItem("edit",JSON.stringify(row));
        }
        
       //分页
        , handleCurrentChange(val) {
            this.pageIndex = val;
            this.getTableData();
        }
        //切换每页数量
        , handleSizeChange(val) {
            this.pageSize = val;
            this.getTableData();
        } ,highlight(v){
            return v.replace(this.search.name, '<span class="highlight">' + this.search.name + '</span>')
        }
    }, created() {
        this.getTableData();
    },components:{
        create,edit
    }
}
</script>

<style scoped>
.demo-form-inline {
    margin-bottom: 10px;
}
</style>